<template>
  <div class="hello">
    <header>
      <div class="logo">
        <img src="../assets/favicon.png" alt="" />
      </div>
      <form action="/">
        <van-search
          v-model="value"
          show-action
          placeholder="请输入搜索关键词"
          @search="onSearch"
        >
          <template #action>
            <div class="ico" @click="onSearch"><van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" /></div>
          </template>
        </van-search>
      </form>
    </header>
    <section class="list">
      <van-tabs v-model="active" sticky>
      <van-tab title="推荐"> <sell/>  </van-tab>
      <van-tab title="手机">内容 2</van-tab>
      <van-tab title="电脑">内容 3</van-tab>
      <van-tab title="生活推荐">内容 3</van-tab>
    </van-tabs>
    </section>
    <footer>
      <h4>-到底了-</h4>
    </footer>
    
  </div>
</template>

<script>
import sell from '@/components/main/sell.vue'
export default {
  name: "HelloWorld",
  components: {
    sell
  },
  props: {
    msg: String,
  },
  data() {
    return {
      value: "",
      active: 0,
    };
  },
  methods: {
    onSearch(val) {
      this.$router.push({ path: "/my" }); 
    },
    
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import "../static/css/base.scss";
@import "../static/componentscss/hellowrld.scss";

h3 {
  margin: 40px 0 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
